<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#dog{
				border:1px solid black;
				font-size:40px;
				margin-right:40px;
			}
			#cat{
				border:1px solid black;
				font-size:40px;
			}
			#imgs{
				margin-top:50px;
			}
		</style>
		
		<script>
			window.onload = function()
			{
				let imgs = document.querySelectorAll('img');
				let cat = imgs[0];
				let dog = imgs[1];
				let CAT = document.querySelector('#cat');
				let DOG = document.querySelector('#dog');
				let dogNum = document.querySelectorAll('#dog #dogNum');
				let catNum = document.querySelectorAll('#cat #catNum');
				let x = 0;
				let y = 0;
				
				CAT.ondragover = function(event)
				{
					event.preventDefault();
				}
				
				CAT.ondrop = function(event)
				{
					let path = event.dataTransfer.getData('text/plain');
					if(path.includes("cat.png"))
					{
						x++;
						catNum.innerHTML = `${x}`;
					}
				}
				
				DOG.ondragover = function(event)
				{
					event.preventDefault();
				}
				
				DOG.ondrop = function(event)
				{
					let path = event.dataTransfer.getData('text/plain');
					if(path.includes('dog.png'))
					{
						y++;
						dogNum.innerHTML = `${y}`;
					}
				}
			}
		</script>
	</head>
	<body>
		
		<p>
			Drag an animal and drop it on the corresponding text.
		</p >
		<span id="dog">
			DOG : <span id="dogNum">0</span>
		</span>
		<span id="cat">
			CAT : <span id="catNum">0</span>
		</span>
		
		<div id="imgs">
			<img src="img/cat.png"/>
			<img src="img/dog.png"/>
		</div>
		
	</body>
	
</html>
